<template>
    <div>
        <h3>发表评论</h3>
        <hr />
        <textarea placeholder="请输入您的评论内容" maxlength="200" v-model="postmsg"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">提交评论</mt-button>
        <!-- start -->
        <div class="cmt-list" v-for="(item,i) in commentlist" :key="i">
            <div class="cmt-head">
                第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | datemsg('YYYY-MM-DD HH:mm')}}
            </div>
            <div class="cmt-body">
                {{item.content}}
            </div>
        </div>
        <!-- end -->
        <mt-button type="danger" size="large" @click="morelist">加载更多</mt-button>
    </div>
</template>

<script>
// 错误提示
import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            commentlist: [],
            pageindex: 1,
            postmsg: ''
        }
    },
    props: ['sonmsg'],
    methods: {
        // 获取评论
        getcomment(){
            // this.$http.get('api/getcomments/16?pageindex=1').then(res => {
            this.$http.get(`api/getcomments/${this.sonmsg}?pageindex=${this.pageindex}`).then(res => {
                if(res.body.status == 0){
                    // this.commentlist = res.body.message; // 重新获取会清空原数组 concat 拼接上新数组并返回赋值
                    this.commentlist = this.commentlist.concat(res.body.message); 
                }else{
                    Toast('获取评论失败');
                }
            })
        },
        // 加载更多
        morelist(){
            this.pageindex++;
            this.getcomment();
            // console.log(this.commentlist);
        },
        // 发表评论
        postcomment(){
            if(this.postmsg.trim() == '' || this.postmsg.trim() == null){            
                Toast('输入内容不能为空');
                this.postmsg = "";
            }else{
                // {emulateJSON: true} // 全局配置发送JSON格式 .trim()剔除两端的空格
                this.$http.post(`api/postcomment/${this.sonmsg}`,{content: this.postmsg.trim()}).then(res => {
                    if(res.body.status != 0){
                        Toast('发表失败');
                    }else{
                        Toast(res.body.message);
                        // 向数组头部添加
                        this.commentlist.unshift({
                            user_name: '匿名用户',
                            add_time: new Date(),
                            content: this.postmsg
                        });
                        this.postmsg = "";
                    }
                })
            }
        }

    },
    created() {
        this.getcomment();
        // console.log(this.sonmsg); // 获取父组件的data数据
    },
}
</script>

<style lang="less" scoped>
    h3{
        font-size: 16px;
        margin-top: 20px;
    }
    textarea{
        font-size: 13px;
        margin-bottom: 0;
        padding: 5px 10px;
    }
    .cmt-list{
        font-size: 14px;
        margin-top: 5px;
        .cmt-head{
            line-height: 25px;
            background: #ececec;
            padding: 0 10px;
        }
        .cmt-body{
            line-height: 20px;
            padding: 5px 10px;
        }
    }
</style>